 <!-- 地图（左） -->
<template>
    <div class="course-map">
        <div class="title">课程销售额</div>
        <div class="map" ref="chart"></div>
    </div>
</template>

<script>
import '../../../echarts/map/js/china.js'
export default {
    // 父组件传入省份数据和范围的最小值最大值
    props:['mapdata','min','max'],
    //图表实例
    mounted() {
        this.init()
    },
    methods: {
        init() {
            //2.基于准备好的dom，初始化echarts实例
            let chart = this.$echarts.init(this.$refs.chart);
            //3.配置数据
            let option = {
                visualMap: {           //地图图例
                    type: 'continuous',
                    show: true,
                    min: this.min,
                    max: this.max,
                    left: 26,
                    bottom: 40,
                    showLabel: true,
                    itemHeight: 90,
                    itemWidth: 10,
                    text: ['销售额'],
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    borderColor: 'rgba(50,50,50,0.7)',
                    formatter: '{b} <br />销售额：{c}',
                    textStyle: {
                        color: '#fefdfd'
                    }
                },
                geo: {                 //中国地图设置
                    map: "china",
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1,
                    top: 20,
                    /* label: {
                        normal: {
                            show: true,
                            fontSize: "14",
                            color: "rgba(0,0,0,0.7)"
                        }
                    }, */
                    itemStyle: {
                        normal: {
                            borderColor: "rgba(0, 0, 0, 0.2)"
                        },
                        emphasis: {
                            areaColor: "#f2d5ad",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                },
                series: {
                    type: "map",
                    geoIndex: 0,
                    data:this.mapdata
                }
            }
            // 4.传入数据
            chart.setOption(option);

            // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
            window.onresize = function () {
                chart.resize()
            }
        }
    }
};
</script>

<style lang="less" scoped>
.course-map {
    width: 100%;
    height: 386px;
    background-color: #fffFff;

    .title {
        height: 40px;
        line-height: 40px;
        padding-left: 8px;
        padding-right: 30px;
        color: rgb(85, 85, 85);
        text-align: left;
        font-size: 14px;
    }

    .map {
        height: 346px;
    }
}
</style>